<script lang='ts' setup name='Child2'>  
    import { loadEnvFile } from "process";
import { ref, onBeforeMount,onMounted ,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
    
    //create
    // function func(){
    // }
    // func()

    const counter = ref(1)


    function counterPlus(){
        counter.value = counter.value +1
    }




    onBeforeMount(()=>{
        console.log("组合式的API  onBeforeMount");   
    })

    onMounted(()=>{
        console.log("组合式的API  onMounted");   
    })

    onBeforeUpdate(()=>{
        console.log("组合式的API  onBeforeUpdate");   
    })

    onUpdated(()=>{
        console.log("组合式的API  onUpdated");   
    })


    onBeforeUnmount(()=>{
        console.log("组合式的API  onBeforeUnmount");   
    })

    onUnmounted(()=>{
        console.log("组合式的API  onUnmounted");   
    })


</script>  
  
<template>  
   <div class="child">

    <h3>第二个个组件</h3>
    <button @click="counterPlus">计数器{{ counter }}</button>


    
   </div>
</template>  
  
<style scoped>  

    .child{

        margin: 10px;
        background-color: skyblue;
        width: 300px;
        height: 300px;
    }


</style>  